<template>
  <div>
    <!--  -->
    <title_slot title_com="装修流程" comtent_com="业主权益第一，我们始终保障着业主装修每一步">
      <div class="ba">
        <div>
          <div style="height:46px;">
            <span class="el-icon-office-building" style="font-size:35px;"></span>
          </div>
          <div style="font-szie:14px;">收房量房</div>
        </div>
        <div>
          <div style="height:46px;">
            <span class="el-icon-edit" style="font-size:35px;"></span>
          </div>
          <div style="font-szie:14px;">设计阶段</div>
        </div>
        <div>
          <div style="height:46px;">
            <span class="el-icon-s-open" style="font-size:35px;"></span>
          </div>
          <div style="font-szie:14px;">材料选购</div>
        </div>
        <div>
          <div style="height:46px;">
            <span class="el-icon-s-check" style="font-size:35px;"></span>
          </div>
          <div style="font-szie:14px;">施工阶段</div>
        </div>
        <div>
          <div style="height:46px;">
            <span class="el-icon-school" style="font-size:35px;"></span>
          </div>
          <div style="font-szie:14px;">竣工验收</div>
        </div>
        <div>
          <div style="height:46px;">
            <span class="el-icon-shopping-cart-1" style="font-size:35px;"></span>
          </div>
          <div style="font-szie:14px;">软装配饰</div>
        </div>
      </div>
    </title_slot>
    <!--  -->

    <title_slot title_com="装修案例" comtent_com="我们累计共为0000位业主提供一站式的装修服务">
      <div>
        <list></list>
      </div>
      <a href="#/no3"><btn te="了解更多装修案例"></btn></a>
    </title_slot>

    <!--  -->

    <title_slot title_com="装修资讯" comtent_com="精选成功案例，快来看看我们装出的家" style="background:#f4f4f4;">
      <div>
        <zhun :sc='asc'></zhun>
      </div>
      <a href="#/no4"><btn te="阅读装修资讯"></btn></a>
    </title_slot>

    <!--  -->

    <title_slot title_com="装修案例" comtent_com="海量效果图为业主提供更多灵感">
      <div>
        <zhu :ass="arr"></zhu>
      </div>
      <a href="#/no2"><btn te="浏览更多效果图"></btn></a>
    </title_slot>

    <!--  -->

    <title_slot title_com="设计团队" comtent_com="我们累计共为0000位业主提供一站式的装修服务" style="background:#f7f7f7;">
      <div>
        <tuan></tuan>
      </div>
    </title_slot>
    <!--  -->
    <title_slot
      title_com="合作品牌"
      comtent_com="众多优质品牌为业主提供高品质建材支持"
    >
      <div>
        <pin></pin>
      </div>
    </title_slot>

    <!--  -->
  </div>
</template>

<script>
import btn from './btn.vue'
import list from "./list.vue";
import zhun from "./zhun.vue";
import zhu from "./zhu.vue";
import tuan from "./tuan.vue";
import pin from "./pin.vue";
import title_slot from "./title.vue";
export default {
  components: {
    title_slot,
    list,
    zhun,
    zhu,
    tuan,
    pin,
    btn
  },
  data() {
    return {
      arr: [
        "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS80ZTc1NDAxMzA1NGM3ZDdmZGI4ZTU4MjNlY2IxZTcxYi00MDB4MzAwLmpwZw_p_p100_p_3D_p_p100_p_3D.m.jpg",
        "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS8zZmQ2ZmQyNGI5MWQyNGFiMWJhYzUwYzZiMTMwODkxZC00MDB4MzAwLmpwZw_p_p100_p_3D_p_p100_p_3D.m.jpg",
        "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS8wZjMxYzk3NjRjMWM3Yzg3MjVhZGE5NzRhZjc0MjRiYy00MDB4MzAwLmpwZw_p_p100_p_3D_p_p100_p_3D.m.jpg",
        "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS9kOGRjNGYzN2M1N2YxYjZiNWRjMjNlZWRlZGJkOTgyNy00MDB4MzAwLmpwZw_p_p100_p_3D_p_p100_p_3D.m.jpg",
        "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS9hZGU5ZDgzZmJmYzY5MTUxMDYwNzFjNGIxMWM1ZTliMS00MDB4MzAwLmpwZw_p_p100_p_3D_p_p100_p_3D.m.jpg",
        "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS8xYmQ4ZDc3ZjNlN2YzYzc4Mzc2MGNiOWFkMTAxOWQ3ZS00MDB4MzAwLmpwZw_p_p100_p_3D_p_p100_p_3D.m.jpg",
        "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNi8wNi80Mjc5MjZhNmZmMWVjMWE1MjNjOWE1MTlkZDE5OTllNy00MDB4MzAwLmpwZw_p_p100_p_3D_p_p100_p_3D.m.jpg",
        "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS80ZGMyNmQwNmFlNjI0MjY3NWM1ZjJjZmEwZjk5YTViYi00MDB4MzAwLmpwZw_p_p100_p_3D_p_p100_p_3D.m.jpg"
      ],
      asc: [
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS9kMmNmMWUzZmM0YWE1N2IwOWFkNzk5YzUzMTdhNTUzYS0xMDB4ODAuanBn.m.jpg",
          text: "软装中的色彩搭配很重要,不可忽略细节"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS9iZjQ5Njk5ZTY2NmI1NzJhMjdlOWQ2MjI0NThhNTViMi0xMDB4ODAuanBn.m.jpg",
          text: "软装中的色彩搭配很重要,不可忽略细节"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS84NjE1YjQ0Mjk2MDEzZDhiM2Y4N2Y3NjhhNjdiOGZkMC0xMDB4ODAuanBn.m.jpg",
          text: "我国家庭软装平均花费占装修平均总费用四成"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS84NjE1YjQ0Mjk2MDEzZDhiM2Y4N2Y3NjhhNjdiOGZkMC0xMDB4ODAuanBn.m.jpg",
          text: "新房装修前要注意的8个问题,省钱不说,主要是能减少遗憾呀!"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS8wZjMxYzk3NjRjMWM3Yzg3MjVhZGE5NzRhZjc0MjRiYy0xMDB4ODAuanBn.m.jpg",
          text: "软装中的色彩搭配很重要,不可忽略细节"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cDovLzU3NWU1YjM1YzRlZTcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS8xYmQ4ZDc3ZjNlN2YzYzc4Mzc2MGNiOWFkMTAxOWQ3ZS0xMDB4ODAuanBn.m.jpg",
          text: "餐厅装饰画选什么?精品山水国画装饰美景多多"
        }
      ]
    };
  }
};
</script>


<style>
.ba {
  overflow: hidden;
  text-align: center;
  color: #808080;
}
.ba > div {
  float: left;
  width: 50%;
  border: 1px solid #ccc;
  padding: 24px 0px;
  box-sizing: border-box;
}

.ba > div:hover {
  color: #fff;
  background: #3ec9ad;
  transition: 0.4s;
}
</style>

